﻿import dumiContext from '@umijs/preset-dumi/lib/theme/context';
import Layout from 'dumi-theme-default/src/layout';
import React, { useContext, useMemo } from 'react';
import { IRouteComponentProps } from 'umi';
import './layout.less';
import '@mat/react-mobile/styles/index.less';

const LayoutPage = ({ children, ...props }: IRouteComponentProps) => {
  const context = useContext(dumiContext);
  const title = useMemo(() => {
    if (context.meta.title?.includes('-')) {
      return `${context.meta.title}`;
    }
    if (!context.meta.title) {
      return 'Components - 组件';
    }
    return `${context.meta.title} - Components`;
  }, [context]);

  return (
    <Layout {...props}>
      <div>
        <title>{title}</title>
        <div key="children">{children}</div>
        <div
          style={{
            position: 'fixed',
            right: 8,
            top: 0,
            zIndex: 999,
            display: 'flex',
            alignItems: 'center',
          }}
          key="mat_dark_theme_view"
          className="mat_dark_theme_view"
        ></div>
      </div>
    </Layout>
  );
};

export default LayoutPage;
